<template>

  <page-header-wrapper>
    <div class="table-page-search-wrapper">
      <a-card>
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="日期">
                <a-date-picker style="width: 100%" :default-value="moment(date, dateFormat)"
                               @change="onChange"></a-date-picker>
              </a-form-item>
            </a-col>
            <!--            <a-col :md="8" :sm="24">-->
            <!--              <a-form-item label="使用状态">-->
            <!--                <a-select v-model="type" placeholder="请选择" :default-value="2">-->
            <!--                  <a-select-option :value="2">半场</a-select-option>-->
            <!--                  <a-select-option :value="3">全场</a-select-option>-->
            <!--                </a-select>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
            <a-col :md="8" :sm="24">
              <a-button type="primary" @click="dataRefresh">刷新</a-button>
            </a-col>
          </a-row>
        </a-form>


        <a-table :columns="columns" :data-source="data" :pagination="false" bordered>
          <span slot="customTitle"><a-icon type="smile-o"/> Name</span>

          <div slot="pos" slot-scope="text,record">
            <span v-if="record.user[Number(text)-1]!=null">
              {{record.user[Number(text)-1].nickName+' '+record.user[Number(text)-1].phone}}
            </span>
            <a-button type="danger" v-if="ok__(record,1,text)" @click="changeState(record,text,3)">
              禁用该时段？
            </a-button>
            <a-button type="primary" v-if="ok__(record,3,text)" @click="changeState(record,text,1)">
              启用该时段？
            </a-button>
          </div>
        </a-table>
      </a-card>
    </div>
  </page-header-wrapper>


</template>

<script>
    import moment from 'moment'
    import {getHistoryOrder,changeCourtState} from "../../api/order";

    const columns1 = [
        {
            dataIndex: 'timeId',
            title: '时间段',
            key: 'timeId',
            customRender(text) {
                const orderTime = [
                    {
                        "value": 1,
                        "text": "10:00~11:00",
                        "disable": true
                    },
                    {
                        "value": 2,
                        "text": "11:00~12:00",
                        "disable": true
                    },
                    {
                        "value": 3,
                        "text": "12:00~13:00",
                        "disable": true
                    },
                    {
                        "value": 4,
                        "text": "13:00~14:00",
                        "disable": true
                    },
                    {
                        "value": 5,
                        "text": "14:00~15:00",
                        "disable": true
                    },
                    {
                        "value": 6,
                        "text": "15:00~16:00",
                        "disable": true
                    },
                    {
                        "value": 7,
                        "text": "16:00~17:00",
                        "disable": true
                    },
                    {
                        "value": 8,
                        "text": "17:00~18:00",
                        "disable": true
                    },
                    {
                        "value": 9,
                        "text": "18:00~19:00",
                        "disable": true
                    },
                    {
                        "value": 10,
                        "text": "19:00~20:00",
                        "disable": true
                    },
                    {
                        "value": 11,
                        "text": "20:00~21:00",
                        "disable": true
                    },
                    {
                        "value": 12,
                        "text": "21:00~22:00",
                        "disable": true
                    }
                ];
                return orderTime[Number(text) - 1].text;
            }
        },
        {
            "dataIndex": "pos1.value",
            "title": "场地 1",
            slots: {title: 'customTitle'},
            scopedSlots: {customRender: 'pos'},
        },
        {
            "dataIndex": "pos2.value",
            "title": "场地 2",
            scopedSlots: {customRender: 'pos'},
        },
        {
            "dataIndex": "pos3.value",
            "title": "场地 3",
            scopedSlots: {customRender: 'pos'},
        },
        {
            "dataIndex": "pos4.value",
            "title": "场地 4",
            scopedSlots: {customRender: 'pos'},
        }
    ]

    const columns2 = [
        {
            dataIndex: 'timeId',
            title: '时间段',
            key: 'timeId',
            customRender(text) {
                const orderTime = [
                    {
                        "value": 1,
                        "text": "10:00~11:00",
                        "disable": true
                    },
                    {
                        "value": 2,
                        "text": "11:00~12:00",
                        "disable": true
                    },
                    {
                        "value": 3,
                        "text": "12:00~13:00",
                        "disable": true
                    },
                    {
                        "value": 4,
                        "text": "13:00~14:00",
                        "disable": true
                    },
                    {
                        "value": 5,
                        "text": "14:00~15:00",
                        "disable": true
                    },
                    {
                        "value": 6,
                        "text": "15:00~16:00",
                        "disable": true
                    },
                    {
                        "value": 7,
                        "text": "16:00~17:00",
                        "disable": true
                    },
                    {
                        "value": 8,
                        "text": "17:00~18:00",
                        "disable": true
                    },
                    {
                        "value": 9,
                        "text": "18:00~19:00",
                        "disable": true
                    },
                    {
                        "value": 10,
                        "text": "19:00~20:00",
                        "disable": true
                    },
                    {
                        "value": 11,
                        "text": "20:00~21:00",
                        "disable": true
                    },
                    {
                        "value": 12,
                        "text": "21:00~22:00",
                        "disable": true
                    }
                ]
                return orderTime[Number(text) - 1].text;
            }
        },
        {
            "dataIndex": "pos5",
            "title": "场地 1+场地 2"
        },
        {
            "dataIndex": "pos6",
            "title": "场地 3+场地 4"
        }
    ]

    const basicData = {
        timeId: null,
        state: [1, 1, 1, 1],
        user: [null, null, null, null],
        timeId_: [null, null, null, null],
        id: [null, null, null, null],
        courtId: 0,
        date:[null,null,null,null],
        pos1: {
            courtId: 1,
            value: '',
            state: 1
        },
        pos2: {
            courtId: 1,
            value: '',
            state: 1
        },
        pos3: {
            courtId: 1,
            value: '',
            state: 1
        },
        pos4: {
            courtId: 1,
            value: '',
            state: 1
        },
        pos5: '',
        pos6: '',
    }


    export default {
        name: "TableCalender",
        data() {
            let date = new Date();
            return {
                date: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
                columns: [],
                type: 2,
                data: [],
                dateFormat: 'YYYY-MM-DD'
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            moment,
            ok__(e, i, text) {
                // if (e.state[Number(text) - 1] == null) return true
                return Number(e.state[Number(text) - 1]) === Number(i)
            },
            changeState(e,text,state){
                let _this=this;
                changeCourtState({
                    id:e.id[text-1],
                    timeId:e.timeId_[text-1],
                    date:e.date[text-1],
                    state,
                    type:2,
                }).then((res)=>{
                    if (res.status === 200) {
                        _this.$notification.success({
                            message: "修改成功"
                        })
                    }else {
                        _this.$notification.warning({
                            message: res.message
                        })
                    }
                    _this.dataRefresh();
                }).catch(res=>{
                    _this.$notification.warning({
                        message: res.message
                    })
                })
            },
            init() {
                let date = new Date();
                let _this = this;
                _this.date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                _this.dataRefresh();
            },
            onChange(date, dateString) {
                let _this = this;
                if (dateString != null && dateString !== '') _this.date = dateString;
            },
            dataRefresh() {
                let _this = this;
                _this.columns = _this.type === 2 ? columns1 : columns2;
                getHistoryOrder({
                    type: _this.type,
                    date: _this.date
                }).then((res) => {
                    if (res.status === 200) {
                        _this.data = []
                        let data = res.data;
                        for (let i = 1; i <= 12; i++) {
                            _this.data.push(JSON.parse(JSON.stringify(basicData)));
                            _this.data[i - 1].timeId = i;
                        }
                        for (let i = 0; i < data.length; i++) {
                            _this.data[data[i].timeId - 1].state[data[i].courtId - 1] = data[i].state
                            _this.data[data[i].timeId - 1].date[data[i].courtId - 1] = data[i].date
                            _this.data[data[i].timeId - 1].id[data[i].courtId - 1] = data[i].id;
                            if (data[i].courtId === 1) {
                                _this.data[data[i].timeId - 1].pos1.value = data[i].courtId
                                _this.data[data[i].timeId - 1].user[data[i].courtId - 1] = data[i].user
                            }
                            if (data[i].courtId === 2) {
                                _this.data[data[i].timeId - 1].pos2.value = data[i].courtId
                                _this.data[data[i].timeId - 1].user[data[i].courtId - 1] = data[i].user
                            }
                            if (data[i].courtId === 3) {
                                _this.data[data[i].timeId - 1].pos3.value = data[i].courtId
                                _this.data[data[i].timeId - 1].user[data[i].courtId - 1] = data[i].user
                            }
                            if (data[i].courtId === 4) {
                                _this.data[data[i].timeId - 1].pos4.value = data[i].courtId
                                _this.data[data[i].timeId - 1].user[data[i].courtId - 1] = data[i].user
                            }
                        }

                    } else {
                        _this.$notification.warning({
                            message: res.message
                        })
                    }
                })
            }
        },
        watch: {
            type(val) {
                this.dataRefresh();
            },
            date() {
                this.dataRefresh();
            }
        }
    }
</script>

<style scoped>

</style>